import React, {
  useRef,
  forwardRef,
  useImperativeHandle,
  Suspense,
  lazy,
} from "react";
import { Form, Input, InputNumber, Button, Select } from "antd";
import type FieldSchema from "./type";
interface DynamicFormType {
  schema: FieldSchema[];
  ref: any;
}
const { Option } = Select;
const DynamicForm: React.FC<DynamicFormType> = forwardRef(({ schema }, ref) => {
  const renderField = (field: FieldSchema) => {
    // const Component = lazy(() => import(`antd/lib/${field.componentName}`));
    // (window as any)[field.name] = {
    //   text: null,
    // };
    // return (
    //   <Suspense fallback={<div>Loading...</div>}>
    //     {field.type !== "button" ? (
    //       <Component
    //         {...field.attr}
    //         {...field.events.reduce((acc: any, event: any) => {
    //           Object.keys(event).forEach((key) => {
    //             acc[key] = new Function(event[key]);
    //           });
    //           return acc;
    //         }, {})}
    //         onChange={(e: any) => {
    //           (window as any)[field.name].text = e.target.value;
    //         }}
    //       />
    //     ) : (
    //       <Component
    //         {...field.attr}
    //         {...field.events.reduce((acc: any, event: any) => {
    //           Object.keys(event).forEach((key) => {
    //             acc[key] = new Function(event[key]);
    //           });
    //           return acc;
    //         }, {})}
    //         onChange={(e: any) => {
    //           (window as any)[field.name].text = e.target.value;
    //         }}
    //       >
    //         {field.name}
    //       </Component>
    //     )}
    //   </Suspense>
    // );

    switch (field.type) {
      case "text":
        return (
          <Input
            {...field.attr}
            {...field.events.reduce((acc: any, event: any) => {
              Object.keys(event).forEach((key) => {
                acc[key] = new Function(event[key]);
              });
              return acc;
            }, {})}
            onChange={(e: any) => {
              (window as any)[field.name].text = e.target.value;
            }}
          />
        );
      case "password":
        return (
          <Input.Password
            {...field.attr}
            onChange={(e: any) => {
              (window as any)[field.name].text = e.target.value;
            }}
            {...field.events.reduce((acc: any, event: any) => {
              Object.keys(event).forEach((key) => {
                acc[key] = new Function(event[key]);
              });
              return acc;
            }, {})}
          />
        );
      case "number":
        return <InputNumber {...field.attr} />;
      case "submit":
        return (
          <Button
            {...field.attr}
            {...field.events.reduce((acc: any, event: any) => {
              Object.keys(event).forEach((key) => {
                acc[key] = new Function(event[key]);
              });
              return acc;
            }, {})}
            type="primary"
            htmlType="submit"
          >
            {field.name}
          </Button>
        );
      case "select":
        return (
          <Select>
            {field.options?.map((option) => (
              <Option key={option} value={option}>
                {option}
              </Option>
            ))}
          </Select>
        );
      default:
        return (
          <Input
            {...field.attr}
            {...field.events.reduce((acc: any, event: any) => {
              Object.keys(event).forEach((key) => {
                acc[key] = new Function(event[key]);
              });
              return acc;
            }, {})}
            onChange={(e: any) => {
              (window as any)[field.name].text = e.target.value;
            }}
          />
        );
    }
  };
  const formRef = useRef<any>(null);
  useImperativeHandle(ref, () => ({
    reset: () => {
      formRef.current.resetFields();
    },
  }));

  return (
    <Form ref={formRef}>
      {schema
        ? schema.map((field: FieldSchema) => (
            <Form.Item key={field.name} label="默认" {...field} {...field.attr}>
              {renderField(field)}
            </Form.Item>
          ))
        : null}
    </Form>
  );
});

export default DynamicForm;
